<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #scroller {
        overflow: scroll;
        height: 150px;
        width: 150px;
        border: 5px dashed orange;
        }

        #output {
        padding: 1rem 0;
        }
    </style>
    <script>
        
    </script>
</head>
<body>
    <div id="container">
        <div id="scroller">
          <p>
            Far out in the uncharted backwaters of the unfashionable end of the
            western spiral arm of the Galaxy lies a small unregarded yellow sun.
            Orbiting this at a distance of roughly ninety-two million miles is an
            utterly insignificant little blue green planet whose ape-descended life
            forms are so amazingly primitive that they still think digital watches are
            a pretty neat idea.
          </p>
        </div>
      </div>
      
      <div id="output">scrollTop: 0</div>
      <input type="text" id="num">
      <button onclick="setScrollTop()">setScrollTop</button>
     </body>

     <script>
        const scroller = document.querySelector("#scroller");
        const output = document.querySelector("#output");

        scroller.addEventListener("scroll", (event) => {
         output.textContent = `scrollTop: ${scroller.scrollTop}`;
        });

        function setScrollTop(){
            var num = document.getElementById("num").value;
            const scroller = document.querySelector("#scroller");
            scroller.scrollTop = num;
          
            //scroller.scrollTop = scroller.scrollHeight;
            console.log("setScrollTop");
            // alert("ok")
        }

      </script>

</html>

